<template>
  <div class="video-boxs" v-if="props.info.url">
    <div class="video-boxs-img">
      <video
        @ended="ended"
        id="video-by-id"
        :controls="playShow"
        :autoplay="false"
        :poster="urls + props.info.url + '?ci-process=snapshot&time=1&format=jpg'"
        :src="urls + props.info.url"
        ref="videoRef"
        class="video-boxs-content"
      ></video>
      <div class="player" @click="play" v-if="!playShow">
        <i class="doorIcon">&#xe672;</i>
      </div>
    </div>
    <!-- <div class="video-boxs-img" :class="{ 'video-boxs-img-opticy': playShow }">
      <img
        class="t-image t-image--fit-contain t-image--position-center"
        :src="urls + props.info.url + '?ci-process=snapshot&time=1&format=jpg'"
        alt=""
      />
    </div> -->

    <div class="video-bottom">
      <span>{{ props.info.name }}</span>
      <t-popup
        attach="#menu-left-btn-xe662"
        overlayClassName="popup"
        class="placement top"
        content="删除视频"
        placement="top"
        showArrow
        destroyOnClose
      >
        <i class="doorIcon" @click="del">&#xe634;</i>
      </t-popup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { urls } from '@/utils/request/upload';
import { ref, nextTick } from 'vue';

const emit = defineEmits(['delVideo']);
const videoRef = ref(null);
const playShow = ref(false);
const props = defineProps({
  info: {
    type: Object,
  },
});
const del = () => {
  emit('delVideo');
};
const play = () => {
  videoRef.value.play();
  playShow.value = true;
  // videoRef.value.requestFullscreen();
  // let element: any = document.getElementById('video-by-id'); //需要全屏容器的id
  // if (element.requestFullscreen) {
  //   element.requestFullscreen();
  // } else if (element.webkitRequestFullScreen) {
  //   element.webkitRequestFullScreen();
  // } else if (element.mozRequestFullScreen) {
  //   element.mozRequestFullScreen();
  // } else if (element.msRequestFullscreen) {
  //   element.msRequestFullscreen();
  // }
};
const ended = () => {
  playShow.value = false;
};
</script>

<style scoped lang="less">
.video-boxs {
  width: 584px;
  // height: 548px;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 12px;
  .video-boxs-img {
    position: relative;
    width: 560px;
    // height: 468px;

    border-radius: 6px;
    img {
      width: 560px;
      // height: 468px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 6px;
    }
    .video-boxs-content {
      width: 560px;
      height: auto;
    }
  }
}
.video-bottom {
  margin-top: 16px;
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
  }
  .doorIcon {
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.38);
    margin-left: 12px;
  }
}
.video-boxs:hover {
  .doorIcon {
    opacity: 1;
  }
}
.player {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
  border-radius: 50%;
  z-index: 9999;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.4);
  // box-shadow: 0px 0px 10px 0px #ffffff;
  cursor: pointer;
  .doorIcon {
    color: #fff;
    font-size: 24px;
  }
}
.video-boxs-img-opticy {
  display: none;
  opacity: 0;
}
</style>
